<template>
  <div>
    <div class="header">
      <!-- <center> -->
      <div class="header_info">
        <div class="left_header">
          <img id="logo" src="../public/kugou_white.png" alt="" />
          <div class="search">
            <span class="iconfont icon-sousuo" @click="goSearch"></span>
            <input type="text" v-model="keyword" />
          </div>
        </div>
        <div class="right_header">
          <a href="javascript:;" :class="{ color: bg_c == 0 }">我的音乐</a>
          <a
            href="javascript:;"
            :class="{ color: this.$route.query.special == 1 }"
            @click="go_special"
            >歌单广场</a
          >
          <a
            href="javascript:;"
            :class="{ color: this.$route.query.rank == 1 }"
            @click.stop="go_rank"
            >音乐排行榜</a
          >
          <a
            href="javascript:;"
            :class="{
              color:
                this.$route.query.sort == 1 ||
                this.$route.query.sort == 2 ||
                this.$route.query.identify == 1 ||
                this.$route.query.identify == 2 ||
                bg_c == 3,
            }"
            @mouseenter="en_singer"
            @mouseleave="le_singer"
          >
            {{
              this.$route.query.sort == null
                ? "歌手"
                : this.$route.query.sort_name
            }}
            <div class="x_box">
              <ul>
                <li @click="go_hall">热门歌手</li>
                <li @click="go_bs">飙升歌手</li>
              </ul>
            </div>
          </a>
          <div class="line"></div>
          <div class="login">登录</div>
        </div>
      </div>
      <!-- </center> -->
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import throttle from "lodash/throttle";
export default {
  data() {
    return {
      //背景
      bg_c: null,
      sort: this.$route.query.sort,
      //关键词
      keyword: this.$route.query.text,

      t: 1,
    };
  },
  mounted() {
    this.$bus.$on("text", (str) => {
      this.keyword = str;
    });
  },
  methods: {
    //点击到导航栏的歌手下滑菜单，更新歌手的数据
    async getdata(index) {
      try {
        await this.$store.dispatch("hall_singer", {
          sextype: 0,
          sort: index,
          size: 100,
          type: 0,
        });
      } catch (error) {
        alert(error.message);
      }
    },
   

    //菜单的歌手下拉菜单(防抖)
    en_singer:throttle(function(){
      $(".x_box").slideDown(25)
      this.bg_c = 3;
    },50),
    le_singer: throttle(function () {
      $(".x_box").slideUp(25);
      setTimeout(() => {
        this.bg_c = null;
      }, 25);
    }, 50),
    //跳转到分类详情并更新数据
    go_hall() {
      this.$router.push({
        name: "singer",
        query: { sort: 1, sort_name: "热门歌手" },
      });
      this.getdata(1);
    },
    go_bs() {
      this.$router.push({
        name: "singer",
        query: { sort: 2, sort_name: "飙升歌手" },
      });
      this.getdata(2);
    },
    //跳到歌单广场
    go_special() {
      this.bg_c = 1;
      this.$router.push({
        name: "special",
        query: { special: 1 },
      });
    },
    //排行榜
    go_rank() {
      this.bg_c = 2;
      this.$router.push({
        name: "rank",
        query: { ranksort: "rank",rank:1 },
      });
    },
    goSearch() {
      if (this.keyword.length > 0) {
        //提前准备数据(解决：在搜索页面进行的第二次搜索)
        this.$store.dispatch("search_song", this.keyword);
        this.$router.push({ name: "search", query: { text: this.keyword } });
      }
    },
  },
  watch: {
    t: {
      handler(a, b) {
        console.log(a + "---" + b);
      },
    },
  },
};
</script>

<style lang="less">
.header {
  height: 80px;
  background-color: #00a9ff;
  .header_info {
    display: flex;
    width: 1000px;
    height: 80px;
    justify-content: space-between;
    margin: 0 auto;
    .left_header {
      display: flex;
      align-items: center;
      flex: 1;
      height: 80px;
      #logo {
        width: 146px;
        height: 38px;
        line-height: 80px;
        float: left;
        padding-right: 40px;
      }

      .search {
        position: relative;
        display: flex;
        align-items: center;
        width: 280px;
        height: 30px;
        border-radius: 15px;
        border: none;

        input {
          height: 30px;
          border: none;
          color: #fff;
          border-radius: 15px;
          padding-left: 40px;
          background-color: rgb(77, 194, 255);
          outline: none;
        }

        span {
          position: absolute;
          left: 15px;
          width: 15px;
          height: 15px;
          color: #fff;
        }
      }
    }

    .right_header {
      display: flex;
      flex: 1;
      align-items: center;
      height: 80px;
      a {
        position: relative;
        flex: 1;
        font-size: 14px;
        line-height: 14px;
        height: 14px;
        padding-top: 5px;
        padding-bottom: 5px;
        border-radius: 5px;
        text-align: center;
        text-decoration: none;
        color: #000;
        float: left;
      }
      .login {
        text-align: center;
        font-size: 16px;
        flex: 1;
        line-height: 30px;
        width: 90px;
        height: 30px;
        border-radius: 15px;
        color: #00a9ff;
        background-color: #fff;
        cursor: pointer;
      }
    }
    .x_box {
      background-color: #fff;
      width: 100%;
      height: 50px;
      display: none;
      padding-top: 10px;
      border-radius: 5px;
      ul {
        li {
          height: 25px;
        }
      }
    }
    .line {
      width: 2px;
      height: 14px;
      background-color: #fff;
      border-radius: 1px;
      margin-right: 14px;
      margin-left: 14px;
    }
    .color {
      background-color: #fff;
      color: #000;
    }
  }
}
</style>